import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";

import "../src/style/index.css";
import ReactSketchRuler from "../src/index";

import "./app.css";

function App() {
  const [hLines, updateHLines] = useState([100, 200]);
  const [vLines, updateVLines] = useState([100, 200]);

  const onLineAdd = (offset, vertical) => {
    if (vertical) {
      updateVLines((lines) => [...lines, offset]);
    } else {
      updateHLines((lines) => [...lines, offset]);
    }
  };

  const appRef = useRef<HTMLDivElement>();

  const [resolution, updateResolution] = useState({
    width: 1920,
    height: 1080,
  });
  const [scaleRatio, updateScaleRatio] = useState(1);
  const [showResolutionCustomize, updateShowResolutionCustomize] = useState(
    false
  );

  const onScaleRatioChange = (event) => {
    const ratio = Number(event.target.value);
    updateScaleRatio(ratio);
  };

  const onResolutionChange = (event) => {
    const value = event.target.value;
    if (value === "customize") {
      updateShowResolutionCustomize(true);
    } else {
      updateShowResolutionCustomize(false);
    }
  };

  return (
    <>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div className={"app"}>
          <div
            ref={appRef}
            style={{
              position: "relative",
              width: resolution.width,
              height: resolution.height,
              backgroundColor: "white",
              transform: `scale(${scaleRatio}, ${scaleRatio})`,
              transformOrigin: "0px 0px"
            
            }}
          >
            <ReactSketchRuler
              hLines={hLines}
              vLines={vLines}
              onLineAdd={onLineAdd}
            ></ReactSketchRuler>
          </div>
        </div>
        <div className={"config"}>
          <fieldset>
            <legend>设计</legend>
            <label>分辨率：</label>
            <select onChange={onResolutionChange}>
              <option value="1920*1080">1920 * 1080</option>
              <option value="customize">自定义</option>
            </select>
            {showResolutionCustomize && (
              <span className="customize">
                <input
                  style={{ width: 40 }}
                  value={resolution.width}
                  onChange={(event) =>
                    updateResolution((resolution) => ({
                      ...resolution,
                      width: Number(event.target.value),
                    }))
                  }
                />
                <span>*</span>
                <input
                  style={{ width: 40 }}
                  value={resolution.height}
                  onChange={(event) =>
                    updateResolution((resolution) => ({
                      ...resolution,
                      height: Number(event.target.value),
                    }))
                  }
                />
              </span>
            )}
            <br />
            <label>缩放比：</label>
            <input
              type="range"
              name="ratio"
              min={0}
              max={2}
              step={0.1}
              value={scaleRatio}
              onChange={onScaleRatioChange}
            ></input>
            <span>{scaleRatio * 100 + "%"}()</span>
            <button onClick={() => updateScaleRatio(1)}>100%</button>
            <br />
            <button onClick={() => appRef.current.requestFullscreen()}>
              预览
            </button>
          </fieldset>
        </div>
      </div>
    </>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);
